import {
    Form, Select, InputNumber, Switch, Radio,
    Slider, Button, Upload, Icon, Rate, Checkbox,
    Row, Col,Input,Modal
  } from 'antd';
  const { TextArea } = Input;

const { Option } = Select;

class FormBaisc extends React.Component {
    state = {
        previewVisible: false,
        previewImage: '',
        fileList: [{
          uid: '-1',
          name: 'xxx.png',
          status: 'done',
          url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
        }],
      };
    
    
handleSubmit = (e) => {
  e.preventDefault();
  this.props.form.validateFields((err, values) => {
    if (!err) {
      console.log('Received values of form: ', values);
    }
  });
}

normFile = (e) => {
  console.log('Upload event:', e);
  if (Array.isArray(e)) {
    return e;
  }
  return e && e.fileList;
}
handleCancel = () => this.setState({ previewVisible: false })

handlePreview = (file) => {
  this.setState({
    previewImage: file.url || file.thumbUrl,
    previewVisible: true,
  });
}

handleChange = ({ fileList }) => this.setState({ fileList })

render() {
  const { getFieldDecorator } = this.props.form;
  const { previewVisible, previewImage, fileList } = this.state;

  const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 14 },
  };
  const uploadButton = (
    <div>
      <Icon type="plus" />
      <div className="ant-upload-text">Upload</div>
    </div>
  );
  return (
    <Form onSubmit={this.handleSubmit}>
      <Form.Item
        {...formItemLayout}
        label="小程序路径"
      >
        <span className="ant-form-text">小程序路径</span>
      </Form.Item>
      <Form.Item
        {...formItemLayout}
        label="商品分类"
        hasFeedback
      >
        {getFieldDecorator('select', {
          rules: [
            { required: true, message: 'Please select your country!' },
          ],
        })(
          <Select placeholder="Please select a country">
            <Option value="china">China</Option>
            <Option value="usa">U.S.A</Option>
          </Select>
        )}
      </Form.Item>

      <Form.Item
        {...formItemLayout}
        label="商品编号"
      >
        {getFieldDecorator('productNumber', {
          rules: [
            { message: 'Please select your favourite colors!', type: 'array' },
          ],
        })(
            <Input placeholder="请填写商品编号！" />
        )}
      </Form.Item>
      <Form.Item
        {...formItemLayout}
        label="商品名称"
      >
        {getFieldDecorator('productName', {
          rules: [
            {required: true, message: 'Please select your favourite colors!', type: 'array' },
          ],
        })(
            <Input placeholder="请填写商品名称！" />
        )}
      </Form.Item>
      <Form.Item
        {...formItemLayout}
        label="商品描述"
      >
        {getFieldDecorator('productDescribe')(
          <TextArea  rows={4}  />
        )}
      </Form.Item>
      <Form.Item
        {...formItemLayout}
        label="零售价"
      >
        {getFieldDecorator('retailPrice', { initialValue: 3 })(
          <InputNumber min={1} max={10} />
        )}
        <span className="ant-form-text">RMB</span>
      </Form.Item>
      <Form.Item
        {...formItemLayout}
        label="成本价"
      >
        {getFieldDecorator('costPrice', { initialValue: 3 })(
          <InputNumber min={1} max={10} />
        )}
        <span className="ant-form-text"> RMB</span>
      </Form.Item>

      {/* <Form.Item
        {...formItemLayout}
        label="商品图"
        extra="建议尺寸： 750X750 (像素) ；拖拽此图片调整顺序"
      >
        {getFieldDecorator('upload', {
          valuePropName: 'fileList',
          getValueFromEvent: this.normFile,
        })(
          <Upload name="logo" action="/upload.do" listType="picture">
            <Button>
              <Icon type="upload" /> Click to upload
            </Button>
          </Upload>
        )}
      </Form.Item> */}

      <Form.Item
        {...formItemLayout}
        label="商品图"
        extra="建议尺寸： 750X750 (像素) ；拖拽此图片调整顺序"

      >
        <div className="dropbox">
          {getFieldDecorator('dragger', {
            valuePropName: 'fileList',
            getValueFromEvent: this.normFile,
          })(
            <div className="clearfix">
            <Upload
              action="//jsonplaceholder.typicode.com/posts/"
              listType="picture-card"
              fileList={fileList}
              onPreview={this.handlePreview}
              onChange={this.handleChange}
            >
              {fileList.length >= 3 ? null : uploadButton}
            </Upload>
            <Modal visible={previewVisible} footer={null} onCancel={this.handleCancel}>
              <img alt="example" style={{ width: '100%' }} src={previewImage} />
            </Modal>
          </div>
          )}
        </div>
      </Form.Item>
    </Form>
  );
}
}

const FormBaiscWrap = Form.create({})(FormBaisc);
export default FormBaiscWrap;